<template>
  <view class="card_voucher">
    <intake-nav-bar title="水卡/卡券" dark :fixed="true" />
    <view class="_card_voucher">
      <view class="header">
        <view class="nav  acea-row row-center-wrapper w-100">
          <view class="item" :class="active == index ? 'font-color' : ''" v-for="(item, index) in navList" :key="index"
            @click="switchTap(index)">
            {{ item }}
          </view>
        </view>
        <view v-if="active === 1" class="coupon-list pt30">
          <view v-for="(item, index) in WaterCardList" :key="index" class="coupon-item">
            <view class="amount">
              <text class="currency">¥</text>
              <text class="number">{{ $common.parseIntFixed(item.price) }}</text>
            </view>
          </view>
        </view>
        <view v-if="active === 0" class="card-list">
          <view v-for="(item, index) in card_list" :key="index" class="card-item" @longtap="longtap(item)">
            <view class="card">
              <view class="card-info h163 flex h130">
                <view class="card-img h120 w100 mt10">
                  <image class=" w97" :src="cardImg" />
                </view>
                <view class="card-header  pb20 pl20">
                  <view class="card-title">会员水卡</view>
                   <view class="card-number">卡号：{{ item.card_code || '-' }}</view>
                </view>
                <view class="card-body   fs20  flex">
                  <view class="balance-info ar pt10 pr10 pb10">
                    <view class="balance-label">当前余额</view>
                    <view class="balance-label pb1">有效期至</view>
                    <view class="hr"></view>
                    <view class="balance-label pb2">时效套餐余额</view>
                    <view class="balance-label">时效有效期</view>
                  </view>
                  <view class="info-item fs20 pt10 pb10 af">
                    <view class="info-value blue">{{ item.remaining_value || '-' }}</view>
                    <view class="info-value pb1">{{ item.updated_time ? item.updated_time.substr(0, 10) : '-' || '-' }}
                    </view>
                    <view class="info-value blue pb2">{{ item.remaining_value || '-' }}</view>
                    <view class="info-value">{{ item.updated_time ? item.updated_time.substr(0, 10) : '-' || '-' }}
                    </view>
                  </view>
                </view>
              </view>
              <view class="card-tel flex pl10 pr10">
                <view class="info-tel  flex">
                  <view class="info-label">绑定电话：</view>
                  <view class="info-value">{{ item.user_info.mobile || '-' }}</view>
                </view>
                <view class="info-item ">
                  绑定社区：{{ item.apparatus_info.title || '-' }}
                  <!-- <view class="info-label">绑定社区：</view>
                  <view class="info-value">龙安丽区</view> -->
                </view>
              </view>
              <view class="bg-active" v-if="activeCard === index"></view>
            </view>
          </view>
          <view class="shipping-info" @click="choice">绑定水卡</view>
        </view>
      </view>
    </view>
    <uni-popup ref="popup" background-color="#fff">
      <view class="popup-content">
        <view class="tip-title">提示</view>
        <view class="message-text">确定要解绑此卡?</view>
        <view class="cancel-btn" @click="closePop">取消</view>
        <view class="confirm-btn" @click="confirm">确定</view>
      </view>
    </uni-popup>
  </view>
</template>

<script>

import {
  getCardCouponLists, getTcCouponLists
} from '@/api/user/coupon.js';
import { getCardLists, deleteUserCard } from '@/api/user/card.js';


export default {
  data() {
    return {
      IsCardShow: true,
      IsCardCouponShow: false,
      card_list: [{}],
      WaterCardList: [],
      navList: ["水卡列表", '水券列表'],
      active: 0,
      page: 1,
      limit: 10,
      loading: false,
      loadend: false,
      cardImg: this.$common.imgUrl() + '/images/home/card@2x.png',
      activeCard: 0,
      selectCard: {}
    };
  },
  async onLoad(query) {
    this.getCardLists();
    // this.getCouponLists();
  },
  methods: {
    longtap(e) {
      this.selectCard = e
      this.$refs.popup.open()
    },
    closePop() {
      this.$refs.popup.close()
    },
    confirm() {
      deleteUserCard({ card_no: this.selectCard.card_code }).then(res => {
        if (res.status === 0) {
          uni.showToast({
            title: '解绑成功',
            icon: 'none',
          });
          this.getCardLists();
        }
      })
    },
    // 绑定水卡
    choice() {
      this.$common.navTo('/pages/intake/card/bind_card');
    },
    // 切换水卡水券
    switchTap(index) {
      console.log("index", index)
      if (index === 0) {
        this.IsCardShow = true;
        this.IsCardCouponShow = false;
      } else {
        uni.showToast({
          title: '暂未开放',
          icon: 'none',
        });
        // this.IsCardShow = false;
        // this.IsCardCouponShow = true;
      }
      // if (this.active === index) return;

      // this.active = index;
      // this.loadend = false;
    },
    // 查询水卡列表
    getCardLists() {
      let that = this;
      getCardLists().then(res => {
        that.card_list = res.data.data;
        // that.activeCard = res.data.data[0];
      })
    },
    getCouponLists() {
      let that = this;
      getCardCouponLists().then(res => {
        that.WaterCardList = res.data;
      })
    },
    bindingCardClick(row) {
      this.$common.navTo('/pages/intake/card/bind_card');
    },
  }
}
</script>

<style lang="scss">
.card_voucher {
  background: url($baseUrl + '/images/bg/user_bg@2x.png') no-repeat center / 100% 100%;
  width: 100%;
  height: 100vh;
  /* 使用视口高度，确保元素高度充满整个屏幕 */
  //display: flex;
  justify-content: center;
  background-size: cover;
  /* 使背景图片覆盖整个元素 */
  padding: 0 30rpx;

  ._card_voucher {}
}

.card_voucher ._card_voucher .header {
  width: 100%;
  height: 460rpx;
}

.card_voucher ._card_voucher .header .nav {
  background-color: #d7ecff;
  //width: 96%;
  height: 68rpx;
  border: 1px solid #fff;
  border-radius: 90rpx;
  font-size: 30rpx;
  color: #263042;
  margin: 0 auto;
}

.card_voucher ._card_voucher .header .nav .item {
  width: 49%;
  height: 100%;
  text-align: center;
  line-height: 60rpx;
}

.card_voucher ._card_voucher .header .nav .item.font-color:nth-of-type(1) {
  background-color: #fff;
  border-radius: 90rpx;
}

.card_voucher ._card_voucher .header .nav .item.font-color:nth-of-type(2) {
  background-color: #fff;
  border-radius: 90rpx;
}

.card_voucher ._card_voucher .header .card-list {
  .card-item {
    background: url($baseUrl + '/images/bg/card@2x.png') no-repeat center/100% 100%;
    border-radius: 20rpx;
    margin-bottom: 30rpx;
    height: 211rpx;
    margin: 34rpx 0;
    padding: 0rpx 29rpx;

    .card-img {
      padding-top: 26rpx;

      image {
        width: 97rpx;
        height: 97rpx;
      }
    }

    .card-header {
      width: 290rpx;
      padding-top: 40rpx;

      .card-title {
        font-weight: 550;
        font-size: 38rpx;
        color: #212B3D;
      }

      .card-number {
        font-size: 25rpx;
        color: #86909C;
      }

    }

    .card-info {

      .card-img,
      .card-header,
      .card-body {
        justify-content: center;
        //border: solid;
      }

      .card-body {
        flex: auto;
        margin-top: 10rpx;

        //flex-direction: column; /* 垂直布局 */
        .balance-info {
          position: relative;
          justify-content: center;
          /* 垂直居中 */
          align-items: flex-start;
          /* 水平靠左对齐 */
        }

        .card-item {
          justify-content: center;
          /* 垂直居中 */
          align-items: flex-start;
          /* 左侧信息靠左对齐，右侧信息默认对齐 */
          flex-wrap: wrap;
          /* 允许换行 */

        }

        .blue {
          color: #034EFD;
          font-size: 21rpx;
        }

        .hr {
          padding: 14rpx 0;
          position: absolute;
          width: 240rpx;
          border-top: dashed 1px #ccc;
        }

        .pb1 {
          margin-bottom: 10rpx;
        }

        .pb2 {
          padding-top: 10rpx;
        }
      }
    }

    .card {
      position: relative;
    }

    .card-tel {
      position: absolute;
      align-items: flex-end;
      color: #86909C;
      font-size: 25rpx;
      margin-top: 10rpx;
      z-index: 99;

      .info-tel {
        width: 300rpx;
      }

      .info-item {
        width: 320rpx;
        text-align: right;
      }
    }

    .bg-active {
      position: absolute;
      width: 690rpx;
      height: 48rpx;
      background-color: #D8EBFE;
      left: -30rpx;
      bottom: -48rpx;
      border-radius: 20rpx;
    }

  }

  .card_falst {
    .tip {}
  }

  .shipping-info {
    width: 690rpx;
    height: 77rpx;
    line-height: 77rpx;
    border-radius: 10rpx;
    background-color: #034EFD;
    text-align: center;
    // font-weight: 600;
    font-size: 32rpx;
    color: #FDFEFF;
  }
}

.card_voucher ._card_voucher .header .card-list {}

.card_voucher ._card_voucher .header .card-list .card-item {}

.card_voucher ._card_voucher .header .coupon-list {

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
}

.card_voucher ._card_voucher .header .coupon-list .coupon-item {

  height: 212rpx;
  background: url($baseUrl + "/images/bg_card@2x.png") no-repeat center / 100% 100%;
  ;

  justify-content: center;
  background-size: cover;
  /* 使背景图片覆盖整个元素 */

  border-radius: 16rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 4rpx 12rpx rgba(43, 133, 255, 0.1);
}

.card_voucher ._card_voucher .header .coupon-list .coupon-item .amount {
  display: flex;
  align-items: baseline;
}

.card_voucher ._card_voucher .header .coupon-list .coupon-item .currency {
  color: #fff;
  font-size: 18px;
  font-weight: 900;

}

.card_voucher ._card_voucher .header .coupon-list .coupon-item .number {
  color: #fff;
  font-size: 33px;

}
</style>
<style lang="scss" scoped>
.popup-content {
  // @include flex;
  width: 586rpx;
  height: 294rpx;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 46rpx 35rpx;

  .tip-title {
    font-size: 36rpx;
    font-weight: 550;
  }

  .message-text {
    margin: 30rpx 0;
    font-size: 24rpx;
    color: #333;
  }

  .cancel-btn {
    border: solid 1px #034EFD;
    border-radius: 40rpx;
    text-align: center;
    width: 227rpx;
    height: 69rpx;
    line-height: 69rpx;
    float: left;
    color: #034EFD;
    margin-right: 50rpx;
  }

  .confirm-btn {
    background-color: #034EFD;
    border-radius: 40rpx;
    text-align: center;
    width: 227rpx;
    height: 69rpx;
    line-height: 69rpx;
    float: left;
    color: #fff;
  }
}
</style>